<template>
  <div class="total-order">
    <CommonCard title="累计订单额" :value="reportData.orderToday">
      <v-chart :option="option"></v-chart>
      <template #footer>
        <span>昨日销售额</span>
        <span class="css-1">¥ {{ reportData.orderLastDay }}</span>
      </template>
    </CommonCard>
  </div>
</template>
<script>
import CommonCard from './CommonCard.vue'
export default {
  props: ['reportData'],
  components: {
    CommonCard,
  },
  data() {
    return {
      option: null,
    }
  },
  methods: {
    renderChart(data) {
      this.option = {
        xAxis: {
          type: 'category',
          show: false,
          boundaryGap: false,
        },
        yAxis: {
          type: 'value',
          show: false,
        },
        grid: {
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
        },
        series: {
          type: 'line',
          data,
          areaStyle: {
            color: 'purple',
          },
          itemStyle: {
            opacity: 0,
          },
          lineStyle: {
            opacity: 0,
          },
          smooth: true,
        },
      }
    },
  },
  // mounted() {
  //   this.renderChart()
  // },
  watch: {
    reportData(newValue) {
      this.renderChart(newValue.orderTrend)
    },
  },
}
</script>
<style scoped></style>
